<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<% String path = request.getContextPath(); %>
<html>
<head>
    <title>nucleic</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="icon" href="<%=path%>/images/favicon.ico" sizes="32x32"/>
    <link rel="stylesheet" href="<%=path%>/css/font.css">
    <link rel="stylesheet" href="<%=path%>/css/xadmin.css">
    <script type="text/javascript" src="<%=path%>/js/jquery-1.3.2.min.js"></script>
    <script src="<%=path%>/lib/layui/layui.js"></script>
    <script type="text/javascript" src="<%=path%>/js/xadmin.js"></script>
    <script src="<%=path%>/layui_exts/excel.js"></script>
    <style type="text/css">
        .layui-table {
            text-align: center;
        }

        .layui-table th {
            text-align: center;
        }
    </style>
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
       <a href="">首页</a>
        <a href="<%=path%>/rubbish/receiptList">查询列表</a>
      </span>
    <a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right"
       href="<%=path%>/rubbish/receiptList" title="刷新">
        <i class="layui-icon" style="line-height:30px">&#xe669;</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so" action="<%=path%>/rubbish/receiptList">
            <input class="layui-input" type="hidden" name="pageIndex" value="1">
            <input class="layui-input" type="hidden" name="pageSize" value="5">
        </form>
    </div>
    <xblock>
        <c:if test="${sessionScope.type=='03'}">
            <button id="addReceiptBtn" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe654;</i>添加</button>
        </c:if>
        <span class="x-right" style="line-height:40px">共有数据：${pageList.totalCount} 条</span>
    </xblock>


    <%--表格数据--%>
    <table class="layui-table">
        <thead>
        <tr>
            <th>预约时间</th>
            <th>预约地点</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${pageList.list}" var="di">
            <tr>
                <th>${di.booktime}</th>
                <th>${di.address}</th>
                <th>${di.createtimeStr}</th>
                <td>
                    <a title="编辑" onclick="receiptEditBtn('${di.id}','${di.booktime}','${di.address}')" href="#">
                        <i class="layui-icon">&#xe642;</i>
                    </a>
                    <a title="删除" onclick="member_del(this,'${di.id}')" href="javascript:;">
                        <i class="layui-icon">&#xe640;</i>
                    </a>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>

    <div class="">
        <input type="hidden" id="totalPageCount" value="${pageList.pageTotalCount}"/>
        <c:import url="pageBtn.jsp">
            <c:param name="totalCount" value="${pageList.totalCount}"/>
            <c:param name="currentPageNo" value="${pageList.pageIndex}"/>
            <c:param name="totalPageCount" value="${pageList.pageTotalCount}"/>
        </c:import>
    </div>
    <%--更新--%>
    <div class="layui-row" id="edit" style="display: none;">
        <div class="layui-col-md10">
            <form class="layui-form" id="editReceiptForm">
                <div style="margin-top: 20px;"></div>
                <div class="layui-form-item">
                    <label class="layui-form-label">预约地点：</label>
                    <div class="layui-input-block">
                        <input type="text" id="address" name="address" class="layui-input"
                               placeholder="">
                    </div>
                    <input type="hidden" name="id" id="id">
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">预约时间：</label>
                    <div class="layui-input-block">
                        <input type="text" id="booktime1" name="booktime" readonly class="layui-input"
                               placeholder="yyyy-MM-dd">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="formEditDemo">
                            提交
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>


    <div class="layui-row" id="save" style="display: none;">
        <div class="layui-col-md10">
            <form class="layui-form" id="saveReceiptForm">
                <div style="margin-top: 20px;"></div>
                <div class="layui-form-item">
                    <label class="layui-form-label">预约地点：</label>
                    <div class="layui-input-block">
                        <input type="text"  name="address" class="layui-input"
                               placeholder="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">预约时间：</label>
                    <div class="layui-input-block">
                        <input type="text"  name="booktime" readonly class="layui-input"
                               placeholder="yyyy-MM-dd">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="formSaveDemo">
                            提交
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>


    <script>
        layui.config({
            base: 'layui_exts/', //存放模块的根目录
        });

        function receiptEditBtn(id,booktime,address){
            //加载模块
            layui.use(['jquery', 'form', 'layer', 'laydate'], function () {
                var form = layui.form, $ = layui.jquery;
                let layer = layui.layer;
                layer.open({
                    type: 1,
                    title: "编辑",
                    skin: "myclass",
                    area: ["50%"],//弹出框大小
                    anim: 2,
                    content: $("#edit"), //请求的URL
                });

                //重置
                $("#editReceiptForm")[0].reset();
                document.getElementById("id").value = id;
                document.getElementById("address").value = address;
                document.getElementById("booktime1").value = booktime;

                form.on("submit(formEditDemo)", function (data) {
                    $.ajax({
                        url: "<%=path%>/receipt/editReceipt",
                        type: 'post',
                        data: JSON.stringify(data.field),
                        contentType: "application/json",
                        accept: "application/json",
                        success: function (data) {
                            if (data.code === 200) {
                                layer.msg('编辑成功', {icon: 1, time: 3000});
                                setTimeout(function () {
                                    window.location.href = '<%=path%>/rubbish/receiptList';
                                }, 2000);
                            }
                        }
                    })
                })
            });
        }

        layui.use(['jquery', 'form', 'layer', 'laydate'], function () {
            var form = layui.form,
                $ = layui.jquery,
                laydate = layui.laydate,
                layer = layui.layer;

            //时间
            laydate.render({
                elem: '#booktime1' //指定元素
            });

            //添加数据
            $("#addReceiptBtn").click(function () {
                layer.open({
                    type: 1,
                    title: "添加",
                    skin: "myclass",
                    area: ["50%"],
                    anim: 2,
                    content: $("#save")
                });
                $("#saveReceiptForm")[0].reset();
                form.on("submit(formSaveDemo)", function (data) {
                    $.ajax({
                        url:'<%=path%>/receipt/save',
                        type:"post",
                        data:JSON.stringify(data.field),
                        contentType: "application/json; charset=utf-8",
                        success:function (data){
                            layer.msg('添加成功', {icon: 1, time: 3000});
                            setTimeout(function () {
                                window.location.href = '<%=path%>/rubbish/receiptList';
                            }, 2000);
                        }
                    });
                });
            });

        });

        /*编辑*/
        function rubbishEditBtn(id) {
            $.ajax({
                url: '<%=path%>/rubbish/findRubbishById?id=' + id,
                type: "get",
                contentType: "application/json; charset=utf-8",
                dataType: 'json', //添加这一条语句
                success: function (res) {
                    layui.use(['jquery', 'form', 'layer', 'laydate'], function () {
                        var form = layui.form, $ = layui.jquery;
                        layer.open({
                            type: 1,
                            title: "编辑",
                            skin: "myclass",
                            area: ["50%"],
                            anim: 2,
                            content: $("#edit"),
                            success: function () {
                            }
                        });
                        $("#editResidentForm")[0].reset();
                        document.getElementById("id").value = res.id;
                        document.getElementById("code").value = res.code;
                        document.getElementById("name").value = res.name;
                        document.getElementById("price").value = res.price;
                        form.on('submit(formEditDemo)', function (data) {
                            var param = data.field;
                            $.ajax({
                                url: '<%=path%>/resident/updateResident',
                                type: "post",
                                data: JSON.stringify(param),
                                contentType: "application/json; charset=utf-8",
                                success: function (res) {
                                    layer.msg('修改成功', {icon: 1, time: 3000});
                                    setTimeout(function () {
                                        window.location.href = '<%=path%>/rubbish/rubbishList';
                                    }, 2000);
                                },
                                error: function () {
                                    layer.msg('修改失败', {icon: 0, time: 3000});
                                    setTimeout(function () {
                                        window.location.href = '<%=path%>/resident/findResident';
                                    }, 2000);
                                }
                            });
                        });
                    });
                },
                error: function () {
                    layer.msg('获取失败', {icon: 0, time: 3000});
                    setTimeout(function () {
                        window.location.href = '<%=path%>/resident/findResident';
                    }, 2000);
                }
            });
        }

        /*删除*/
        function member_del(obj, id) {
            layer.confirm('确认要删除吗？', function (index) {
                //发异步删除数据
                $.get("<%=path%>/receipt/deleteReceipt?id=" + id, function (data) {
                    layer.msg('删除成功!', {icon: 1, time: 2000});
                    setTimeout(function () {
                        window.location.href = '<%=path%>/rubbish/receiptList';
                    }, 2000);
                });
            });
        }
    </script>
</body>
</html>
